<template>
  <div class="app-container">
    <!-- 搜索栏 -->
    <div class="serach-container">
      <div class="search-inputs">
        <el-form :inline="true" :model="simpleForm" class="demo-form-inline searchCondition" label-position="right" label-width="100px">
          <el-form-item label="VIN">
            <el-input v-model="simpleForm.vin" maxlength="17" placeholder="请输入VIN码" />
          </el-form-item>
          <el-form-item label="大区">
            <el-select v-model="simpleForm.saleRegionName" clearable placeholder="请选择大区" @change="simpleForm.provinceCode = '', complexForm.cityCode = '', $forceUpdate()">
              <el-option v-for="(item, index) in regions" :key="index + '_' + item.bigAreaCode" :label="item.bigAreaName" :value="item.bigAreaCode" />
            </el-select>
          </el-form-item>
          <el-form-item label="省份">
            <el-select v-model="simpleForm.provinceCode" filterable clearable placeholder="请选择省份" @change="complexForm.cityCode = '', $forceUpdate()">
            <el-option v-for="(item, index) in provinceOptions" :key="index + '_' + item.provinceCode" :label="item.provinceName" :value="item.provinceCode" />
            </el-select>
          </el-form-item>
         
          <el-button type="primary" @click="queryTableList">查询</el-button>
          <el-button @click="handelRest">重置</el-button>
        </el-form>
        <el-collapse-transition>
          <div v-if="isMore" class="more-container">
            <el-form :inline="true" :model="complexForm" class="demo-form-inline searchCondition" label-position="right" label-width="100px">
               <el-form-item label="店简称">
                    <el-input v-model="complexForm.dealerShortName" placeholder="请输入店简称"/>
                </el-form-item>
                <el-form-item label="店代码">
                    <el-input v-model="complexForm.dealerCode" placeholder="请输入店代码"/>
                </el-form-item>
                <el-form-item label="车系标准名称">
                    <el-select
                        v-model="complexForm.seriesNormalName"
                        filterable
                        clearable
                        placeholder="请选择车系标准名称"
                        @change="(complexForm.modelName = ''), $forceUpdate()"
                    >
                        <el-option
                        v-for="item in vehicleNormalOptions"
                        :key="item.seriesNormalName"
                        :label="item.seriesNormalName"
                        :value="item.seriesNormalName"
                        />
                    </el-select>
                </el-form-item>
                <el-form-item label="车系">
                    <el-select
                        v-model="complexForm.seriesName"
                        filterable
                        clearable
                        placeholder="请选择车系"
                        @change="(complexForm.modelName = ''), $forceUpdate()"
                    >
                        <el-option
                        v-for="item in vehicleOptions"
                        :key="item.seriesName"
                        :label="item.seriesName"
                        :value="item.seriesName"
                        />
                    </el-select>
                </el-form-item>
                <el-form-item label="车型">
                    <el-select
                        v-model="complexForm.modelName"
                        filterable
                        clearable
                        placeholder="请选择车型"
                        @change="$forceUpdate()"
                    >
                        <el-option
                        v-for="item in modelOptios"
                        :key="item.modelName"
                        :label="item.modelName"
                        :value="item.modelName"
                        />
                    </el-select>
                </el-form-item>
                <el-form-item label="上牌大区">
                    <el-select
                        v-model="complexForm.plateBigArea"
                        clearable
                        placeholder="请选择上牌大区"
                        @change="(complexForm.plateCity = ''), $forceUpdate()"
                    >
                        <el-option
                        v-for="item in plateRegions"
                        :key="item.bigAreaCode"
                        :label="item.bigAreaName"
                        :value="item.bigAreaCode"
                        />
                    </el-select>
                </el-form-item>
                <el-form-item label="上牌城市">
                    <el-select
                        v-model="complexForm.plateCity"
                        filterable
                        clearable
                        placeholder="请选择上牌城市"
                        @change="$forceUpdate()"
                    >
                        <el-option
                        v-for="item in plateCityOptions"
                        :key="item.cityCode"
                        :label="item.cityName"
                        :value="item.cityCode"
                        />
                    </el-select>
                </el-form-item>
            </el-form>
            <el-form
                :inline="true"
                class="demo-form-inline"
                label-position="right"
                label-width="100px"
            >
                <el-form-item label="开票日期">
                    <el-date-picker
                        v-model="invoiceDate"
                        type="daterange"
                        range-separator="至"
                        start-placeholder="开始日期"
                        end-placeholder="结束日期"
                    />
                </el-form-item>
                <el-form-item label="上牌日期">
                    <el-date-picker
                        v-model="plateDate"
                        type="daterange"
                        range-separator="至"
                        start-placeholder="开始日期"
                        end-placeholder="结束日期"
                    />
                </el-form-item>
            </el-form>
          </div>
        </el-collapse-transition>
      </div>
      <div class="search-toggle">
        <el-button
          type="text"
          @click="handelToggle"
        >
          {{ isMore ? '普通搜索' : '高级搜索' }}
        </el-button>
      </div>
    </div>
    <!-- 内容区域 -->
    <div class="section-container">
      <el-table v-loading="listLoading" size="mini" :data="tables.data" border fit highlight-current-row style="width: 100%" height="600">
        <el-table-column type="index" label="序号" width="50" align="center" />
        <el-table-column v-for="item in tables.columns" :key="item.key" :label="item.lable" :width="item.width" :align="item.align" :show-overflow-tooltip="true">
          <template slot-scope="{row}">
            <span  v-if="item.key === 'effectiveEndTime'" >{{ row | effectiveEndTimeFilter }}</span>
            <span v-else>{{ row[item.key] }}</span>
          </template>
        </el-table-column>
        <el-table-column label="状态" align="center" :show-overflow-tooltip="true">
          <template slot-scope="{row}">
            <el-switch v-model="row.status" :active-value="1" :inactive-value="0" @change="handelSwitchStatus(row)" />
          </template>
        </el-table-column>
        <el-table-column align="center" label="操作" width="240" fixed="right">
          <template slot-scope="{row}">
            <div class="actions-columns">
              <el-button type="text" size="small" @click="handelCheck(row)">查看</el-button>
              <el-button type="text" size="small" @click="handelEdit(row)"> 修改</el-button>
              <el-button type="text" size="small" @click="handelDelete(row)">删除</el-button>
            </div>
          </template>
        </el-table-column>
      </el-table>
      <pagination :total="total" :page.sync="pages.page" :limit.sync="pages.limit" @pagination="changePages" />
    </div>

    <!-- 详情弹窗 -->
    <el-dialog title="查看" :visible.sync="checkVisible" width="60%">
      <div class="detailContainer">
        <div v-for="item in tables.columns" :key="item.key" class="detailItem">
          <div>
            <span class="detailTitle">{{ item.lable }}：</span>
           <span  v-if="item.key === 'effectiveEndTime'" >{{ currents | effectiveEndTimeFilter }}</span>
            <span v-else>{{ currents[item.key] }}</span>
          </div>
        </div>
      </div>
      <div slot="footer" class="dialog-footer" style="text-align: center;">
        <el-button type="primary" @click="checkVisible = false">确 认</el-button>
        <el-button @click="checkVisible = false">取 消</el-button>
      </div>
    </el-dialog>

    <!-- 修改弹窗 -->
    <el-dialog :title="isEdit ? '修改': '新增'" :visible.sync="editVisible" width="650px">
      <el-form ref="ruleForm" :model="ruleForm" :inline="true" label-width="120px" class="demo-ruleForm">
        <div>
          <el-form-item
            label="VIN"
            prop="vin"
            :rules="[
              { required: true, message: '请输入或选择VIN', trigger: 'blur' }
            ]">
            <el-input v-model="ruleForm.vin"  :disabled="isEdit"/>
          </el-form-item>
          <!-- <el-form-item label="">
            <el-button v-if="!isEdit" type="text" size="small" @click="handelSelect">批量选择</el-button>
          </el-form-item> -->
        </div>
        <div>
          <el-form-item
            label="有效时间"
            v-if="!effectiveEndTimeType"
            prop="effectiveEndTime"
            :rules="[
              { required: true, message: '请选择有效时间', trigger: 'change' },
              { type: 'array', message: '请选择有效时间', trigger: 'change' }
            ]"
          >
            <el-date-picker 
              type="daterange"
              v-model="ruleForm.effectiveEndTime"
              @change="setEffectiveEndTime"
              clearable
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期" />
          </el-form-item>
          <el-form-item
              v-else
              label="有效时间"
            >
              <el-date-picker 
                type="daterange"
                v-model="ruleForm.effectiveEndTime"
                @change="setEffectiveEndTime"
                clearable
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期" />
            </el-form-item>
          <el-form-item label="">
            <el-radio @change="setEffectiveEndTimeRadio" v-model="effectiveEndTimeType" :label="1">永久有效</el-radio>
          </el-form-item>
        </div>
      </el-form>
      <div slot="footer" class="dialog-footer" style="text-align: center;">
        <el-button type="primary" :loading="uploadLoading" @click="comfirmUpdate('ruleForm')">确 认</el-button>
        <el-button @click="editVisible = false">取 消</el-button>
      </div>
    </el-dialog>

    <!-- 导入弹窗 -->
    <el-dialog :title="!!!steps ? '导入' : '导入结果'" :visible.sync="detailVisible" width="60%">
      <div v-show="!!!steps" class="stepOne">
        <div class="title">1、数据整理</div>
        <div class="section">
          <div class="import-tips">请根据导入模版填写数据；数据字段不符合规则，整条数据不予以导入</div>
          <div class="actions">
            <div style="margin-top: 10px;">
              <el-button :loading="uploadLoading" type="text" icon="el-icon-download" plain @click="handleExportAll">下载导入模版</el-button>
            </div>
          </div>
        </div>
        <div class="title">2、上传数据文件</div>
        <div class="section">
          <div class="import-tips">支持的文件类型为xls、xlsx；文件大小不超过10M</div>
          <div class="actions">
            <input v-show="false" id="uploadFile" size="small" accept=".xlsx, .xls" type="file" @change="getFile($event)">
            <el-button :loading="uploadLoading" type="primary" icon="el-icon-upload2" plain @click="handleUpload">上传文件</el-button>
          </div>
          <div v-if="file">{{ file.name }}</div>
        </div>
      </div>
      <div v-show="!!steps" class="stepTwo">
        <div class="import-tips success"><span>{{ uploadSuccess.length }}</span>条数据将会被导入</div>
        <scorll-tbale ref="scorllSuccessTbale" table-class-name="success"/>
        <div class="import-tips fail"><span>{{ uploadFaile.length }}</span>条数据将不会被导入</div>
        <scorll-tbale ref="scorllFailTbale" table-class-name="fail"/>
      </div>
      <div slot="footer" class="dialog-footer" style="text-align: center;">
        <el-button v-show="!!steps" type="primary" :loading="uploadLoading" :disabled="!uploadSuccess.length" @click="handleConfirmUpload">确认导入</el-button>
        <el-button v-show="!!steps" type="primary" @click="steps = 0">上一步</el-button>
        <el-button v-show="!!!steps" type="primary" :loading="uploadLoading || comfirmLoading" @click="handleConfirm">确认</el-button>
        <el-button @click="detailVisible = false">取消</el-button>
      </div>
    </el-dialog>

    <!-- vin批量选择弹窗 -->
    <!-- <vin-list-dialog ref="vinListDialog" @setSelectVin="setSelectVin"/> -->
  </div>
</template>

<script>
import { queryWhiteListSingle, deleteWhiteListSingle, importWhiteListSingle, exportWhiteListSingle, switchWhiteListSingle, addWhiteListSingle, exportWhiteListSingleTemp, editWhiteListSingle } from '@/api/crossRegionalMonitoring'
import Pagination from '@/components/Pagination'
import NavBarBread from '@/components/NavBarBread'
import scorllTbale from './scorllTbale'

import { downloadByUrl } from '@/utils/download'
import { getStorageByKey, unique_arr_by_key, dateFtt, fomatComfirmStr } from '@/utils/public'
export default {
  name: 'carNewWhite',
  components: { Pagination, NavBarBread, scorllTbale },
  data() {
    return {
      tables: {
        columns: [
          { lable: "VIN", key: "vin", width: "160px", align: "center" },
          {
            lable: "大区",
            key: "saleRegionName",
            width: "80px",
            align: "center"
          },
          { lable: "省份", key: "province", width: "80px", align: "center" },
          { lable: "城市", key: "city", width: "80px", align: "center" },
          {
            lable: "店简称",
            key: "dealerShortName",
            width: "100px",
            align: "center"
          },
          {
            lable: "店代码",
            key: "dealerCode",
            width: "80px",
            align: "center"
          },
          {
            lable: "车系标准名称",
            key: "seriesNormalName",
            width: "160px",
            align: "center"
          },
          { lable: "车系", key: "seriesName", width: "120px", align: "center" },
          { lable: "车型", key: "modelName", width: "160px", align: "center" },
          {
            lable: "上牌人姓名",
            key: "plateName",
            width: "90px",
            align: "center"
          },
          {
            lable: "上牌大区",
            key: "plateBigArea",
            width: "80px",
            align: "center"
          },
          {
            lable: "上牌省份",
            key: "plateProvince",
            width: "80px",
            align: "center"
          },
          {
            lable: "上牌城市",
            key: "plateCity",
            width: "80px",
            align: "center"
          },
          {
            lable: "上牌日期",
            key: "plateDate",
            width: "150px",
            align: "center"
          },
          {
            lable: "开票日期",
            key: "invoiceDate",
            width: "90px",
            align: "center"
          },
          {
            lable: "有效时间",
            key: "effectiveEndTime",
            width: "260px",
            align: "center"
          },
          {
            lable: "创建时间",
            key: "createTime",
            width: "160px",
            align: "center"
          }
        ],
        data: []
      },
      pages: {
        pageNum: 1,
        pageSize: 20
      },
      total: 0,
      listLoading: true,
      detailVisible: false,
      checkVisible: false,
      invoiceDate: [],
      plateDate: [],
      simpleForm: {},
      complexForm: {},
      isMore: false,
      // 大区数据
      regions: getStorageByKey("regionsMap"),
      // 上牌大区数据
      plateRegions: getStorageByKey("regionsMap"),
      // 车系车型数据集
      vehicleOptions: getStorageByKey("vehicleMap"),
      // 车系标准名称(去重)
      vehicleNormalOptions: unique_arr_by_key('seriesNormalName', getStorageByKey('vehicleMap')),
      steps: 0,
      file: null,
      uploadLoading: false,
      comfirmLoading: false,
      uploadSuccess: [],
      uploadFaile: [],
      isUpload: false,
      currents: {},
      editVisible: false,
      ruleForm: {
        effectiveEndTime: null,
        vin: ''
      },
      effectiveEndTimeType: 0,
      currentId: '',
      isEdit: false
    }
  },
  filters: {
    // 有效时间
    effectiveEndTimeFilter(row) {
      const { startTime, endTime, createTime } = row
      let effectiveEndTimeStr = ''
      if (startTime && endTime) {
        effectiveEndTimeStr = `${startTime}至${endTime}`
      } else if (startTime && !endTime) {
        effectiveEndTimeStr = `${startTime}至永久`
      } else if (!startTime && endTime) {
        effectiveEndTimeStr = `${createTime}至${endTime}`
      } else {
        effectiveEndTimeStr = '永久有效'
      }
      return effectiveEndTimeStr
    }
  },
  computed: {
    // 省份下拉选项 跟随所选大区而变化
    provinceOptions() {
      if (this.regions && this.regions.length) {
        const currentBigArea = this.regions.filter(
          (item) => this.simpleForm.saleRegionName === item.bigAreaCode
        );
        const allProvince = this.regions.reduce((newArr, current) => {
          return newArr.concat(current.provinceList);
        }, []);
        if (currentBigArea.length)
          return unique_arr_by_key(
            "provinceCode",
            currentBigArea[0].provinceList
          );
        return unique_arr_by_key("provinceCode", allProvince);
      } else {
        return [];
      }
    },
    // 城市下拉选项 跟随所选省份而变化
    cityOptions() {
      const currentProvince = this.provinceOptions.filter(
        (item) => this.simpleForm.provinceCode === item.provinceCode
      );
      if (currentProvince.length) return currentProvince[0].cityDtoList;
      const allCity = this.provinceOptions.reduce((newArr, current) => {
        return newArr.concat(current.cityDtoList);
      }, []);
      return allCity;
    },
    // 上牌城市下拉选项 跟随上牌大区而变化
    plateCityOptions() {
      if (this.plateRegions && this.plateRegions.length) {
        // 获得所有城市列表
        const allCity = this.plateRegions.reduce((newArr, current) => {
          return newArr.concat(
            current.provinceList.reduce((newCityArr, currentProvince) => {
              return newCityArr.concat(currentProvince.cityDtoList);
            }, [])
          );
        }, []);
        // 获取所选大区下的城市
        const plateBigArea = this.complexForm.plateBigArea;
        const currentarea_next_province = this.plateRegions.filter(
          (item) => item.bigAreaCode === plateBigArea
        );
        if (currentarea_next_province.length) {
          return currentarea_next_province[0].provinceList.reduce(
            (newArr, current) => {
              return newArr.concat(current.cityDtoList);
            },
            []
          );
        } else {
          return allCity;
        }
      } else {
        return [];
      }
      // return allCity
    },
    // 车型下拉选项，跟随车系而变化
    modelOptios() {
      if (this.vehicleOptions && this.vehicleOptions.length) {
        const { seriesName, seriesNormalName } = this.complexForm;
        const allModel = this.vehicleOptions.reduce((newArr, current) => {
          return unique_arr_by_key('modelName', newArr.concat(current.modelNameList))
        }, []);
        const currentModelList = this.vehicleOptions.filter(
          (item) =>
            item.seriesName === seriesName ||
            item.seriesNormalName === seriesNormalName
        );
        if (currentModelList.length) return currentModelList[0].modelNameList;
        return allModel;
      } else {
        return [];
      }
    }
  },
  created() {
    this.queryTableList()
  },
  methods: {
    handleExportAll() {
      downloadByUrl(process.env.SPANNED_MONITOR_SERVICE + 'v1/private/img-download/whitelist-single-temp-export')
    },
    changePages(params) {
      this.pages = { ...params }
      this.queryTableList()
    },
    async queryTableList() {
      this.formatParams();
      this.listLoading = true;
      const { data } = await queryWhiteListSingle(this.formatParams());
      const items = data;
      this.tables.data = items.list;
      this.total = items.total;
      this.listLoading = false;
    },
    handleConfirm() {
      if (!this.isUpload) {
        return this.$message({
          type: 'error',
          message: '请先上传文件或等待文件上传完毕'
        })
      }
      this.steps = 1
    },
    handleConfirmUpload() {
      this.uploadLoading = true
      const uploadSuccess = this.uploadSuccess
      const params = uploadSuccess.map(item => ({
        vin: item.vin,
        startTime: item.startTime ? (dateFtt(new Date(item.startTime), 'yyyy-MM-dd') + ' 00:00:00') : null,
        endTime: item.endTime ? (dateFtt(new Date(item.endTime), 'yyyy-MM-dd') + ' 23:59:59') : null
      }))
      addWhiteListSingle(params).then(res => {
        this.$message({
          type: 'success',
          message: '操作成功'
        })
        this.detailVisible = false
        this.queryTableList()
      }).finally(() => {
        this.uploadLoading = false
      })
    },
    formatAddParams() {
      const { vin, effectiveEndTime } = this.ruleForm
      const params = {
        vin,
        startTime: '',
        endTime: ''
      }
      if (effectiveEndTime && effectiveEndTime.length) {
        params.startTime = dateFtt(effectiveEndTime[0])
        params.endTime = dateFtt(effectiveEndTime[1], 'yyyy-MM-dd') + ' 23:59:59'
      }
      return params
    },
    comfirmUpdate(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.uploadLoading = true
          const params = this.formatAddParams()
          if (this.isEdit) {
            params.id = this.currentId
            editWhiteListSingle(params).then(res => {
              this.editVisible = false
              this.queryTableList()
            }).finally(() => {
              this.uploadLoading = false
            })
          } else {
            const { vin, startTime, endTime } = params
            const vins = vin.split('、')
            const result = vins.map(item => ({
              vin: item,
              startTime,
              endTime
            }))
            addWhiteListSingle(result).then(res => {
              this.editVisible = false
              this.queryTableList()
            }).finally(() => {
              this.uploadLoading = false
            })
          }
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    formatParams() {
      const params = { ...this.simpleForm, ...this.complexForm, ...this.pages }
      const saleRegionName = this.simpleForm.saleRegionName;
      // 将大区代码转换成对应名称
      if (saleRegionName) {
        const target = this.regions.find(
          (item) => item.bigAreaCode === saleRegionName
        );
        params["saleRegionName"] = target.bigAreaName;
      }
      if (this.invoiceDate && this.invoiceDate.length) {
        params["invoiceDateStart"] = dateFtt(this.invoiceDate[0]);
        params["invoiceDateEnd"] =
          dateFtt(this.invoiceDate[1], "yyyy-MM-dd") + " 23:59:59";
      }
      if (this.plateDate && this.plateDate.length) {
        params["plateDateStart"] = dateFtt(this.plateDate[0]);
        params["plateDateEnd"] =
          dateFtt(this.plateDate[1], "yyyy-MM-dd") + " 23:59:59";
      }
      return params
    },
    // 清空查询条件
    handelRest() {
      for (const key in this.simpleForm) {
        this.simpleForm[key] = ''
      }
      this.clearComplexSearchCondetions()
    },
    // 清空复杂查询条件
    clearComplexSearchCondetions() {
      for (const key in this.complexForm) {
        this.complexForm[key] = ''
      }
    },
    handelToggle() {
      this.isMore = !this.isMore
      !this.isMore && this.clearComplexSearchCondetions()
    },
    handelDelete(row) {
      const { id } = row
      this.$confirm('此操作将删除该车辆白名单，您确认要继续吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        deleteWhiteListSingle(id).then((res) => {
          this.$message({
            type: 'success',
            message: '操作成功'
          })
          this.queryTableList()
        })
      })
    },
    // 启用/禁用
    handelSwitchStatus(row) {
     const { startTime, endTime, createTime, id, status } = row
      const params = { id, status: status ? 0 : 1 }
      const confirmStr = fomatComfirmStr(startTime, endTime, createTime, status)
      this.$confirm(confirmStr, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        switchWhiteListSingle(params).then((res) => {
          this.$message({
            type: 'success',
            message: '操作成功'
          })
          this.queryTableList()
        })
      }).catch(() => {
        row.status = status ? 0 : 1   
      });
    },
    handelCheck(row) {
      this.currents = row
      this.checkVisible = true
    },
    handelEdit(row) {
      const { startTime, id, endTime, vin } = row
      this.currentId = id
      this.ruleForm.vin = vin
      if (startTime) {
        this.effectiveEndTimeType = 0
        this.ruleForm.effectiveEndTime = [new Date(startTime), new Date(endTime)]
      } else{
        this.effectiveEndTimeType = 1
        this.ruleForm.effectiveEndTime = null
      }
      this.editVisible = true
      this.isEdit = true
    },
    getFile(event) {
      this.file = event.target.files[0]
      this.uploadLoading = true
      const formData = new FormData()
      formData.append('file', this.file)
      importWhiteListSingle(formData).then(res => {
        const { data } = res
        const { successList, errorList } = data

        if (successList.length) {
          for(let i=0; i< successList.length; i++) {
            successList[i].index = i + 1
          }
        }
        if (errorList.length) {
          for(let i=0; i< errorList.length; i++) {
            errorList[i].index = i + 1
          }
        }
        
        this.uploadSuccess = successList
        this.uploadFaile = errorList
        this.$refs.scorllSuccessTbale.init(successList)
        this.$refs.scorllFailTbale.init(errorList)
        this.isUpload = true
        this.steps = 1
      }).finally(() => {
        this.uploadLoading = false
        event.target.value = ''
      })
    },
    handleUpload() {
      document.getElementById('uploadFile').click()
    },
    handelImport() {
      this.detailVisible = true
      this.isUpload = false
      this.steps = 0
      this.file = null
    },
    handelExport() {
      const params = this.formatParams()
      this.$delete(params, 'pageNum')
      this.$delete(params, 'pageSize')
      downloadByUrl(process.env.SPANNED_MONITOR_SERVICE + 'v1/private/img-download/whitelist-single-export/', params)
    },
    setEffectiveEndTime(val) {
      if (val) {
        this.effectiveEndTimeType = 0
      }
      this.$forceUpdate()
    },
    setEffectiveEndTimeRadio(val) {
      if (val) {
        this.ruleForm.effectiveEndTime = null
      }
      this.$forceUpdate()
    },
    handelAdd() {
      this.ruleForm.vin = '',
      this.ruleForm.effectiveEndTime = null
      this.editVisible = true
      this.isEdit = false
    }
  }
}
</script>
<style scoped>
  ::v-deep .el-dialog__body{
    padding: 0px 20px;
  }
  ::v-deep(.el-form-item .el-form-item__content){
    width: 200px;
  }
  .el-input{
    width: 202px;
  }
  ::v-deep .actions-columns .el-button{
    padding: 0px;
  }
</style>
<style lang="scss" scoped>
  $red:#C03639;
  $green: #30B08F;
  .isActive{
    color: $red;
  }
  .serach-container{
    width: 100%;
    display: flex;
    justify-content: space-between;
    // .search-inputs{
    //   width: 90%;
    // }
  }
  .tool-container{
    width: 100%;
    display: flex;
    justify-content: space-between;
    line-height: 40px;
    .toggle-warning{
      font-family: 'PingFangSC-Semibold', 'PingFang SC Semibold', 'PingFang SC', sans-serif;
      font-weight: 650;
      font-style: normal;
      font-size: 16px;
    }
  }
  .stepOne{
    .title{
      color: #333;
      line-height: 50px;
      font-weight: 650;
    }
    .section{
      width: 100%;
      box-sizing: border-box;
      padding-left: 20px;
      .actions{
        margin: 10px 0px 20px 0px;
      }
    }
  }
  .stepTwo{
    .import-tips{
      line-height: 30px;
      span{
        margin-right: 5px;
      }
    }
    .success{
      span{
        color: $green;
      }
    }
    .fail{
      margin-top: 5px;
      span{
        color: $red;
      }
    }
  }
  .detailContainer {
    display: flex;
    flex-wrap: wrap;
    padding: 0 15px;
    width: 100%;
    .detailItem{
        width: 48%;
        min-height: 50px;
        div{
            display: flex;
        }
        .detailTitle{
            font-weight: bold;
            display: inline-block;
            max-width: 120px;
            min-width: 60px;
        }
    }
}
</style>
